<template>
  <div id="app">
    <Header ref="header"></Header>
    <RouterView :key="$route.fullPath"></RouterView>
    <Footer></Footer>
  </div>
</template>

<script>
import Header from "@/components/Header/Header";
import Footer from "@/components/Footer/Footer";
import {initIM} from "@/utils/im";
import {getToken} from "@/utils/auth";
export default {
  name: 'App',
  components: {
    Header, Footer
  },
  beforeCreate() {
    //全局监听IM事件
    //SDK ready 监听
    this.$bus.$on('onSdkReady',()=>{
      this.$store.commit('user/SET_READY',true);
    })
    // SDK 收到推送的单聊、群聊、群提示、群系统通知的新消息，event.data
    this.$bus.$on('onMessageReceived',()=>{

    })
    // SDK 收到消息被修改的通知，event.data
    this.$bus.$on('onMessageModified',(e)=>{

    })
    // SDK 收到消息被撤回的通知
    this.$bus.$on('onMessageRevoked',()=>{

    })
    // SDK 收到对端已读消息的通知，即已读回执
    this.$bus.$on('onMessageReadByPeer',()=>{

    })
    // 会话列表更新，event.data 是包含 Conversation 对象的数组
    this.$bus.$on('onConversationListUpdated',()=>{

    })
    // 自己或好友的资料发生变更时触发，event.data 是包含 Profile 对象的数组
    this.$bus.$on('onProfileUpdated',()=>{

    })
    // SDK 黑名单列表更新时触发
    this.$bus.$on('onBlacklistUpdated',()=>{

    })
    // 好友列表更新时触发
    this.$bus.$on('onFriendListUpdated',()=>{

    })
    // 好友分组列表更新时触发
    this.$bus.$on('onFriendGroupListUpdated',()=>{

    })
    // 用户被踢下线时触发
    this.$bus.$on('onKickedOut',()=>{
      this.$refs.header.loginOut();
    })
    // 网络状态发生改变
    this.$bus.$on('onNetStateChange',()=>{

    })
  },
  mounted() {
    initIM().then(()=>{
      const hasToken=this.$store.getters.token;
      if(hasToken){
        this.$store.dispatch('user/loginIM')
      }
    }).catch((err)=>{
      this.$message.error(err);
    })
  },
  beforeDestroy() {
    //注销监听
    this.$bus.$off('onSdkReady')
    this.$bus.$off('onMessageReceived')
    this.$bus.$off('onMessageModified')
    this.$bus.$off('onMessageRevoked')
    this.$bus.$off('onMessageReadByPeer')
    this.$bus.$off('onConversationListUpdated')
    this.$bus.$off('onProfileUpdated')
    this.$bus.$off('onBlacklistUpdated')
    this.$bus.$off('onFriendListUpdated')
    this.$bus.$off('onFriendGroupListUpdated')
    this.$bus.$off('onKickedOut')
  }
}
</script>

<style lang="scss">
@import "assets/iconfont/iconfont.css";
@font-face {
  font-family: 'fzhzgbjt';
  src: url("assets/fonts/FangZhengHanZhenGuangBiaoJian.TTF");
}
.swiper-pagination-bullet-active {
  background: #fff !important;
}

* {
  margin: 0;
  padding: 0;
  border: none;
  box-sizing: border-box;
  text-decoration: none;
  outline: none;
  color: $black;
}

html, body {
  width: 100%;
  height: 100%;
}

body {
  background: $lightGray;
}

input::placeholder {
  color: $darkGray;
}

*:active {
  border: none;
  text-decoration: none;
  outline: none;
}

/*
滚动条美化
 */
::-webkit-scrollbar-track {
  background-color: #F5F5F5
}

::-webkit-scrollbar {
  width: 3px;
  background-color: #F5F5F5
}

::-webkit-scrollbar-thumb {
  background-color: #d6d6d6
}
.empty {
  text-align: center;
  color: #313131;
  font-size: 14px;
  margin: 15px 0;
}
.btn{
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  cursor: pointer;
  border-radius: 40px;
}
.btn.normal{
  color: #fff;
  background: $red;
}
.btn.normal-against{
  color: $red;
  background: #fff;
  border: 1px solid $red;
}
.btn1{
  border-radius: 30px;
  background: #617286;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}
.btn2{
  border-radius: 30px;
  background:$orange;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}
.btn3{
  border-radius: 30px;
  color: $orange;
  border: 1px solid $orange;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}
.el-button--primary,{
  *{
    color: #fff;
  }
}
.el-button--primary.is-plain{
  *{
    color: $orange;
  }
}
.el-button--primary.is-plain:hover{
  *{
    color: #fff;
  }
}
</style>
